<!-- 电梯设备 -->
<template>
	<view class="page" v-if="device_work_state">
		<view class="el-ponit-scbox" style="height: auto" v-if="errorList&&errorList.length>0">
			<view class="el-tit">
				预警通知
			</view>
			<view class="err-list">
				<view class="err-list-col" v-for="(item,index) in errorList" :key="index">
          <view class="err-list-col-l">
            <text class="wxbtn" style="background: rgba(247, 77, 57, 1)">
              故障
            </text>
            <text>{{item.dwCode}} | {{ item.parkNum }}区{{ item.buildingName }} </text>
          </view>
          <view class="err-list-col-r">
            <text>{{ item.errorTime }}</text>
            <u-icon name="arrow-right" size="20" color="#999999" class="wicon"></u-icon>
          </view>
					
				</view>
			</view>
		</view>
		<view class="el-tit" style="padding:20rpx 32rpx;">
			楼栋位置
		</view>
		<view class="el-ponit-scbox" v-if="showList!=null">
			<view class="park-tab">
				<text :class="tabIndex==0?'park-tab-ac':''" @click="tabChange(0)">A区</text>
				<text :class="tabIndex==1?'park-tab-ac':''" @click="tabChange(1)">B区</text>
			</view>
			<scroll-view class="ponit-c" scroll-y="true">
				<view class="ponit-c-b">
					<view class="ponit-col" @click="pointClick(item,index)" :class="index==acPoint?'ponit-col-ac':''"
						v-for="(item,index) in showList" :key="index">
						{{ item.buildingName }}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="ev-content">
			<mescroll-body   @init="mescrollInit" :down="downOption"
				@down="downCallback" @up="upCallback">
				<view class="arcol_list_col" v-for="(item, index) in dataList" :key="index"
					@click="navTo('/pageSecurity/elevator/elevatorInfo?id=' + item.id)" v-if="dataList != null">
          <view class="arcol_list_col_l">
            <view class="arcol_list_col_l_t">
              <view>
                <text class="wxbtn" :style="{
              background: btnColor(item)
            }" v-if="!isEmpty(device_work_state[item.state].txt) ">
                  {{ device_work_state[item.state].txt }}
                </text>
                <text class="wxbtn" style="margin-left: 10rpx;color: #fff" v-if="item.expire==1">
                  待年检
                </text>
                <text>{{ item.dwCode }} | {{ item.elevatorCode }}</text>
              </view>

            </view>
            <view class="arcol_list_col_l_b">
              <text>{{ item.elevatorName }}</text>
              <text>年检时间：{{ item.checkNextDate }}</text>
            </view>
          </view>
          <view class="arcol_list_col_r">
            <u-icon name="arrow-right" size="20" color="#999999" class="wicon"></u-icon>
          </view>
				</view>
			</mescroll-body>
		</view>

	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		name:'elevator',
		data() {
			return {
				acPoint: 0,
				tabIndex:0,
        errorList:null,
				listTree: [],
				showList: null,
				dataList: null,
				device_work_state: null,
				queryParams: {
					parkId: '1455055210710827008',
					buildingId: '1473467810427437056'
				},
				firReq: true,
				downOption: {
					page: {
						num: 0,
						size: 10,
						time: null,
					},
					auto: false, //是否在初始化后,自动执行downCallback; 默认true
				},
			};
		},
		computed: {
			txtColor() {
				return (item) => {
					let color = "rgba(68, 217, 75, 1)";
					if (item.state == 2 || item.expire == 1) {
						color = "rgba(247, 77, 57, 1)";
					} else if (item.state == 0) {
						color = "rgba(51, 51, 51, 1)";
					}
					return color;
				};
			},
			btnColor() {
				return (item) => {
					let opacity = "0.15";
					let color = `#78E47D`;
					if (item.state == 2) {
						color = `#B0B0B0`;
					} else if (item.state == 0) {
						color = `#FA8181`;
					}
					return color;
				};
			},
		},
		created() {
			this.apis.commonApi.getDict("device_work_state").then((res) => {
				this.device_work_state = this.dictFilter(res.data);
			});
      this.apis.securityApi.errorElevatorList().then(res => {
        this.errorList=res.data
        console.log(res)
      })
		},
		methods: {
			downCallback(page) {
				this.dataList = []
				this.mescroll.resetUpScroll()
			},
			upCallback(page) {
				if (this.firReq) {
					this.apis.commonApi.buiParkListTree().then(res => {
						this.listTree = res.data
						this.showList = res.data[1].buildingInfoVOList
						this.queryParams.buildingId = res.data[1].buildingInfoVOList[0].id
						this.getData(page)
						this.firReq = false
					})
				} else {
					this.getData(page)
				}
			},
			getData(page) {
				//联网加载数据
				this.apis.securityApi
					.afElevatorList({
						pageNum: page.num,
						pageSize: page.size,
						parkId: this.queryParams.parkId,
						buildingId: this.queryParams.buildingId
					})
					.then((res) => {
						if (this.dataList == null) {
							this.dataList = []
						}
						this.dataList = this.dataList.concat(res.rows);
						this.mescroll.endBySize(res.rows.length, res.total);
					})
					.catch(() => {
						//联网失败的回调,隐藏下拉刷新的状态
						this.mescroll.endErr();
					});
			},
			pointClick(e, index) {
				this.acPoint = index
				this.queryParams.buildingId = e.id
				this.downCallback()
			},
			tabChange(e) {
				let tabIndex=this.tabIndex=e
				if (tabIndex == 0) {
					this.queryParams.parkId = "1455055210710827008"
					this.showList = this.listTree[1].buildingInfoVOList
					this.queryParams.buildingId = this.showList[0].id

				} else {
					this.queryParams.parkId = "1442332031974375424"
					this.showList = this.listTree[0].buildingInfoVOList
					this.queryParams.buildingId = this.showList[0].id
				}
				this.acPoint = 0
				this.downCallback()
				this.mescroll.scrollTo(0, 0)
			}
		},
	};
</script>

<style lang="scss" scoped>
	.wxbtn {
		display: inline-block;
		font-size: 24rpx;
		font-weight: 400;
		color: #fff;
		line-height: 34rpx;
		padding: 4rpx 10rpx;
		background: #FFC346;
		border-radius: 4rpx;
    margin-right: 10rpx;

		text {
			color: #fff;
		}
	}

	.date {
		font-size: 26rpx;
		font-weight: 400;
		color: #999999;
	}

	.ev-content {
		margin-top: 20rpx;
	}

	.el-ponit-scbox {
		position: relative;
		z-index: 2;
		width: 100%;
		height: 280rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin: 20rpx 0 20rpx;
		padding: 30rpx 32rpx;
		display: flex;
		flex-direction: column;

		.ponit-t {
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
			padding-bottom: 20rpx;
		}

		.ponit-c {
			width: 100%;
			height: 100%;
			display: flex;
			overflow: hidden;
      background: #fff;

			.ponit-c-b {
				padding-top: 12rpx;
				width: 100%;
				display: flex;
				flex-wrap: wrap;
			}

			.ponit-col {
				margin: 0 20rpx 20rpx 0;
				padding: 16rpx 10rpx;
				box-sizing: border-box;
				width: 200rpx;
				height: 70rpx;
				background: #F9F9F9;
				border-radius: 12rpx;
				position: relative;
				font-size: 24rpx;
				font-weight: bold;
				color: #333333;
				line-height: 33rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: center;

				&:nth-child(3n) {
					margin-right: 0;
				}
			}

			.ponit-col-ac {
				background: #4cd964;
				color: #fff;
			}

		}
		
		.park-tab{
			padding: 0 0rpx 6rpx;
			
			text{
				margin-right: 40rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 33rpx;
			}
			.park-tab-ac{
				font-size: 28rpx;
				font-weight: bold;
				position: relative;
				&::after{
					position: absolute;
					width: 24rpx;
					height: 4rpx;
					content: "";
					bottom: -8rpx;
					left: 50%;
					transform: translate(-50%,-50%);
					background: #44D94B;
				}
			}
		}
	}
	
	.el-tit{
		font-size: 26rpx;
		font-weight: 500;
		color: #666666;
		line-height: 30rpx;
	}
	
	.err-list{
    .err-list-col{
      padding-top: 22px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .err-list-col-r{
      font-size: 28rpx;
      font-weight: 500;
      color: #999999;
    }
		
	}
</style>
